<script setup lang="ts">
import { getLoginLogUsingGet } from '@/api/logController'
import { Table, TableColumnData } from '@arco-design/web-vue'
import { onMounted, Ref, ref } from 'vue'
import { useUserStore } from '@/store'
import dayjs from 'dayjs'
// 访问日志数据
defineOptions({
  name: 'LoginLog'
})
const loginLogs: Ref<any> = ref()
const userStore = useUserStore()
onMounted(async () => {
  if (!userStore.user.id) return
  const res = await getLoginLogUsingGet({ userId: userStore.user.id })
  loginLogs.value = res.data
})
// 表格列定义

const columns: TableColumnData[] = [
  {
    title: '登录地址',
    dataIndex: 'address',
    width: 280,
    align: 'center'
  },
  {
    title: '登录设备',
    dataIndex: 'device',
    align: 'center'
  },
  {
    title: '登录时间',
    dataIndex: 'loginTime',
    width: 180,
    align: 'center',
    render: ({ record }) => dayjs(record.loginTime).format('YYYY-MM-DD HH:mm:ss'),
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  }
]

// 需要添加 defineExpose 导出组件
defineExpose({})
</script>

<template>
  <div class="section-item">
    <div class="item-header">访问日志</div>
    <div class="item-content">
      <a-table
        :columns="columns"
        :data="loginLogs"
        :bordered="false"
        :pagination="false"
        :scroll="{ y: 'calc(100vh - 300px)' }"
        class="log-table"
      />
    </div>
  </div>
</template>

<style scoped>
.section-item {
  background-color: #fff;
  border-radius: 4px;
}

.item-header {
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-1);
  border-bottom: 1px solid var(--color-border);
}

.item-content {
  padding: 0 20px;
}

.log-table {
  margin: -16px -20px;
}

:deep(.arco-table-th) {
  background-color: var(--color-bg-2) !important;
  font-weight: 500;
  color: var(--color-text-1);
}

:deep(.arco-table-tr) {
  cursor: default;
}

:deep(.arco-table-td) {
  color: var(--color-text-2);
}

:deep(.arco-table-hover-cell) {
  background-color: var(--color-fill-2) !important;
}
</style>
